<template>
	<view class="container">
		<view class="warp u-m-t-20">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required"></u-gap>
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="课程类型" prop="xb">
					<u-input :border="border" type="select" :select-open="selectShowkclx" v-model="form.kclx" placeholder="请选择"
					 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowkclx = true"></u-input>
				</u-form-item> -->
				<u-form-item v-if="model.iam == '智汇团队'" class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition"
				 label="选择团队" prop="hdjf">
					<u-input type="select" :select-open="selectShowTeam" v-model="form.team" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowTeam = true"></u-input>
				</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200"
					 :label-position="labelPosition" :border-bottom="true" label="课程分类" prop="fblx">
						<view style="width:100%;text-align: right;" @click="mSelect">{{form.kcfl || "请选择"}}</view>
					</u-form-item>
					<block v-if="form.kcfl == '专家课程' || form.kcfl == '牛人课程'">
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" label="产业" prop="industry">
							<view style="width:100%;text-align: right;" @click="cySelect">{{form.industry || "请选择"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="专业方向" prop="specialty">
							<view style="width:100%;text-align: right;" @click="zySelect">{{form.specialty || "请选择"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="课程内容" prop="kcnr">
							<view style="width:100%;text-align: right;" @click="kcnrSelect">{{form.kcnr || "请选择"}}</view>
						</u-form-item>

					</block>
					<block v-if="form.kcfl == '高校课堂'">
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="专业方向" prop="specialty">
						<view style="width:100%;text-align: right;" @click="zySelect">{{form.specialty || "请选择"}}</view>
						</u-form-item>
					</block>
					<block v-if="form.kcfl == '培训机构课堂'">
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="阶段" prop="specialty">
							<view style="width:100%;text-align: right;" @click="pxjgShow = true">{{form.jd || "请选择"}}</view>
						</u-form-item>
					</block>
					<block v-if="form.kcfl == '职业教育培训'">
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="培训方向" prop="specialty">
							<view style="width:100%;text-align: right;" @click="pxfxSelect">{{form.pxfx || "请选择"}}</view>
						</u-form-item>
					</block>
				
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">简短说明</text>
				</view>
				<u-form-item class="zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition" prop="jdsm">
					<u-input type="textarea" :border="border" placeholder="请输入简短说明" v-model="form.jdsm" />
				</u-form-item>
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="地域" prop="region">
					<u-input type="select" :select-open="selectShowDy" v-model="form.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowDy = true"></u-input>

				</u-form-item> -->
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
				 label="时间预告" prop="sjyg">
					<u-input :border="border" @click="showDate = true" placeholder="请选择" v-model="form.sjyg" type="text" input-align="right"></u-input>
					<u-calendar v-model="showDate" ref="calendar" @change="changeDate" mode="date" :start-text="startText" :end-text="endText"
					 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
					</u-calendar>
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">

			<u-button class="button" @click="submit">确定</u-button>
			<TriTree ref="triTree" :multiple="false" :range="fetchDict.curriculum_promotion" @confirm="function (e){return setChooseType(e,'kcfl')}"></TriTree>

			<TriTree ref="kcnrTree" :range="fetchDict.course_content" @confirm="function (e){return setChooseType(e,'kcnr')}"></TriTree>
				
			<u-select mode="single-column" :list="fetchDict.curriculum_promotion" v-model="lbshow" @confirm="selectConfirmLb"></u-select>
			<u-select mode="single-column" :list="kclxs" v-model="selectShowkclx" @confirm="selectConfirmKclx"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<u-picker mode="selector" v-model="specialtyShow" @confirm="function (e){return confirm(e,specialtyList,'specialty')}"
			 :range="specialtyList" :range-key="rangKey"></u-picker>
			<u-picker mode="selector" v-model="pxjgShow" @confirm="function (e){return confirmF(e,fetchDict.institutional_phase_training,'jd')}"
			 :range="fetchDict.institutional_phase_training" range-key="label"></u-picker>
			<u-picker mode="selector" v-model="pxfxShow" @confirm="function (e){return confirmF(e,fetchDict.direction_training,'pxfx')}"
			 :range="fetchDict.direction_training" range-key="label"></u-picker>
			 <TriTree :multiple="false" ref="reftdlxSelect" :range="fetchDict.group_type" @confirm="function (e){return setChooseType(e,'tdlx')}"></TriTree>
			 <TriTree :multiple="false" ref="tzzgSelect" :range="fetchDict.people_type" @confirm="function (e){return setChooseType(e,'tzzg')}"></TriTree>
			 <TriTree ref="qyzzSelect" :range="fetchDict.qualification_merge" @confirm="function (e){return setChooseType(e,'qyzz')}"></TriTree>
			 <TriTree ref="ptriTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return psetChooseType(e,'specialty')}"></TriTree>
			 
			 <TriTree ref="cyTree" :multiple="false" :range="fetchDict.industry" @confirm="function (e){return setChooseType(e,'industry')}"></TriTree>
			 <u-select mode="single-column" :list="selectListTeam" v-model="selectShowTeam" value-name="id" label-name="name"
			  @confirm="confirmTeam"></u-select>	
				  
				  <TriTree ref="pxfxTree" :range="fetchDict.direction_training" @confirm="function (e){return setChooseType(e,'pxfx')}"></TriTree>
		</view>
	</view>
</template>
<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	export default {
		components: {
			TriTree
		},
		data() {
			let that = this;
			return {
				selectListTeam:[],
				selectShowTeam:false,
				lbshow:false,
				ywhzs:["办公场地合作","产业链对接","产品展示合作"],
				ywindex:0,
				pxjgShow:false,
				sindex:0,
				sfs:["企业","团队","个人","政府"],
				pxfxShow:false,
				listCitys: [],
				defaultValue: [3],
				selectShowDy: false,
				kclxs: this.$mConstDataConfig.kclxs,
				selectShowkclx: false,
				rangKey: 'pname',
				specialtyList: [],
				pxjdList:[],
				specialtyShow: false,
				cates: [],
				fetchDict: [],
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				model: {
					intention: {}
				},
				form: {},
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				btnType: 'primary',
				reqBody: {},
				rules: {},
				required: false,
				border: false,
				check: false,
				selectShowFwnr: false,
				radio: '',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				url: '',
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: false,
				deletable: true,
				customStyle: false,
				maxCount: 9,
				lists: [], // 组件内部的文件列表
				filePaths: '', // 文件路径
				fileNames: '', // 文件名称
				action: this.$apis.uploadFile,
				baseUrl: this.$mConfig.baseUrl,
			};
		},
		mounted() {},
		onShow() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
				this.form.kclx = this.model.demand.kclx;
			}
			if (options.type) {
				this.url = JSON.parse(decodeURIComponent(options.type));
			}
			console.log(this.url );
			//this.dictionaryFetchDict('curriculum_promotion'); //智汇推广
			this.dictionaryFetchDict('curriculum_promotion'); //课程推广
			this.dictionaryFetchDict('course_content'); //软件使用
			this.dictionaryFetchDict('adept_field_stage'); //培训机构
			this.dictionaryFetchDict('direction_training'); //培训方向
			
			this.dictionaryFetchDict('institutional_phase_training'); //培训机构阶段	

			this.dictionaryFetchDict('industry'); //产业菜单
			this.getProfession(); //专业方向
			this.cityList();
			this.dictionaryFetchDict('financing_cooperation_project_category');
			this.getTeamList();
		},
		methods: {		
			
			pxfxSelect(){				
				this.$refs.pxfxTree._show()
			},
			async getTeamList(){
				let result = await this.$apis.findUserTeam();
				this.selectListTeam = result.data;
				if(result.data.length == 0 && this.model.iam == '智汇团队'){
					uni.showToast({
						title:"您还没有创建团队",
						icon:'none'
					})
					setTimeout(function(){						
						uni.navigateBack();
					},2000);
				}
			},
			confirmTeam(e) {
				e.map((val, index) => {
					this.form.team = val.label;
				})
			},
			cySelect() {
				this.$refs.cyTree._show()
			},	
			zySelect() {
				this.$refs.ptriTree._show()
			},		
			psetChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			confirm(e,list,type){		
				var itemKey = e[0];	
				console.log(itemKey);
				this.form[type] = list[itemKey].pname;
			},
			confirmF(e,list,type){				
				var itemKey = e[0];
				this.form[type] = list[itemKey].label;
			},
			async cityList() {
			let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},
			confirmCity(e) {
				this.form.region = '';
				e.map((val, index) => {
					this.form.region += this.form.region == '' ? val.label : '-' + val.label;
				})
			},
			changeDate(e) {
				console.log('reuslt',e.result);
				this.form.sjyg = e.result;
			},
			selectConfirmKclx(e) {
				this.form.kclx = '';
				e.map((val, index) => {
					this.form.kclx += this.form.kclx == '' ? val.label : '-' + val.label;
				});		
			},
			selectConfirmLb(e) {
				this.form.lb = '';
				e.map((val, index) => {
					this.form.lb += this.form.lb == '' ? val.label : '-' + val.label;
				});
			},
			mSelect() {
				this.$refs.triTree._show()
				this.$forceUpdate()
			},
			
			qyzzSelect() {
				this.$refs.qyzzSelect._show()
				this.$forceUpdate()
			},
			specialsSelect() {
				this.$refs.specialsTree._show()
				this.$forceUpdate()
			},
			tdlxSelect() {
				this.$refs.reftdlxSelect._show();
			},
			tzzgSelect() {
				this.$refs.tzzgSelect._show();
			},
			
			async getProfession() {
				let result = await this.$apis.profession();
				this.specialtyList = result.data;
			},		
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.dictGroup({
					dictCode: keyWords
				});
				this.fetchDict[keyWords] = result.data.reverse();
				this.$forceUpdate()
			},
			kcnrSelect() {
				this.$refs.kcnrTree._show()
				this.$forceUpdate()
			},
			bindPickerChange(e) {
				if (this.form.kclx == undefined) {
					uni.showToast({
						title: "请先选择课程类型",
						icon: 'none'
					})
					return;
				}
				this.sindex = e.detail.value;
				this.form.lb = this.fetchDict.chi_hui_promotion[e.detail.value].label;
			},
			bindPickerzzChange(e) {
				this.zindex = e.detail.value;
				this.form.zzqk = this.zzqks[e.detail.value];
			},
			bindPickerYwhzChange(e) {
				this.ywindex = e.detail.value;
				this.form.ywhz = this.ywhzs[e.detail.value];
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.model.demand = this.form;
						var model = encodeURIComponent(JSON.stringify(this.model));
						if (this.url != '') {
							console.log("url", this.url);
							uni.redirectTo({
								url: '/pages/' + this.url + '?row=' + model
							})
						}
					} else {
						console.log('验证失败');
					}
				});

			}
		}
	};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;

		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}

	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007aff solid;

		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}

	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 145rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.wdztc {
		width: 190rpx;
		height: 56rpx;
		background: rgba(171, 97, 255, 0.15);
		border: 2rpx dashed #AB61FF;
		border-radius: 6rpx;
		color: #AB61FF;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		margin-top: 40rpx;
		margin-left: 280rpx;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
